<template>
  <div
    class="sudoku-cell"
    :class="{
      'original': isOriginal,
      'selected': isSelected,
      'related': isRelated,
      'same-value': hasSameValue,
      'error': hasError
    }"
    @click="$emit('click')"
  >
    {{ value || '' }}
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

defineEmits(['click']);

defineProps({
  value: {
    type: Number,
    default: 0
  },
  isOriginal: {
    type: Boolean,
    default: false
  },
  isSelected: {
    type: Boolean,
    default: false
  },
  isRelated: {
    type: Boolean,
    default: false
  },
  hasSameValue: {
    type: Boolean,
    default: false
  },
  hasError: {
    type: Boolean,
    default: false
  }
});
</script>

<style scoped>
.sudoku-cell {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  border: 1px solid #dcdee0;
  position: relative;
}

.original {
  color: #323233;
  background-color: #f2f3f5;
}

.selected {
  background-color: #1989fa;
  color: #fff;
}

.related {
  background-color: #e6f7ff;
}

.same-value {
  color: #1989fa;
  font-weight: bold;
}

.error {
  color: #ee0a24;
}
</style>
